<template>
  <div>
    <base-header-footer
      :isShowContentTitle="false"
      :isShowBreadCrumb="false"
      :isShowArchived="false"
    >
      <!-- isShowTitle : 布尔值，是否显示当前页面标题组件-->
      <!-- isShowBreadCrumb : 布尔值，是否显示当前页面面包屑导航组件-->
      <!-- isShowArchived : 布尔值，是否显示当前页面归档组件-->
      <template slot="content-item-home">
        <home-swiper></home-swiper>
        <home-card
          title="欢迎光临"
          path="/category/other"
          :isSwiper="false"
          :isWrap="true"
          :cardList="cardList"
        ></home-card>
        <home-card
          title="在线教程 - 可左右滑动选择"
          path="/category/webread"
          :isSwiper="true"
          :cardList="courseSpecial"
        ></home-card>
        <home-card
          title="图例素材"
          path="/category/sourcespack"
          :isSwiper="false"
          :isWrap="true"
          :cardList="sourcespack"
        ></home-card>
        <home-recommend></home-recommend>
        <home-card
          title="萌绘图库 "
          path="/category/cg-sketch"
          :isSwiper="false"
          :cardList="cgSketch"
          :isWrap="true"
          ><template slot="top-right">
            <nuxt-link to="/category/cg-sketch/otomeartbook"
              >乙女向画集</nuxt-link
            ><span>/</span>
            <nuxt-link to="/category/cg-sketch/moeimo">同人&小画集</nuxt-link
            ><span>/</span>
            <nuxt-link to="/category/cg-sketch/artwork">大型画集</nuxt-link>
          </template></home-card
        >
        <home-card
          title="漫画线稿 "
          path="/category/cg-sketch/sketch"
          :isSwiper="false"
          :cardList="sketch"
          :isWrap="true"
        ></home-card>
      </template>
    </base-header-footer>
  </div>
</template>

<script>
import HomeSwiper from "@/components/homeComp/HomeSwiper.vue";
import HomeCard from "@/components/homeComp/HomeCard.vue";
import HomeRecommend from "@/components/homeComp/HomeRecommend.vue";
import BaseHeaderFooter from "@/components/baseheaderfooter/BaseHeaderFooter.vue";
import { mapState } from "vuex";
export default {
  name: "HomeView",
  components: {
    HomeSwiper,
    HomeCard,
    HomeRecommend,
    BaseHeaderFooter,
  },
  head() {
    return {
      title: this.headTitle,
    };
  },
  data() {
    return {
      courseSpecial: [],
      sourcespack: [],
      cgSketch: [],
      sketch: [],
      cardList: [],
    };
  },
  computed: {
    ...mapState(["menghuiList", "headTitle"]),
  },
  async asyncData(app) {
    //欢迎光临
    const resCardList = await app.$api.getArticle({
      path: "/category/other",
      num: 4,
    });
    let cardList = resCardList.data;
    cardList.forEach((item) => {
      app.store.state.menghuiList.forEach((citem) => {
        if (item.id == citem.id) {
          item.title = citem.title;
        }
      });
    });

    //在线教程
    const resCourseSpecial = await app.$api.getArticle({
      path: "/category/webread/special/course-special",
    });
    let courseSpecial = resCourseSpecial.data;

    //图例素材
    const resSourcespack = await app.$api.getArticle({
      path: "/category/sourcespack",
      num: 4,
    });
    let sourcespack = resSourcespack.data;

    //萌绘图库
    const resCgSketch = await app.$api.getArticle({
      path: "/category/cg-sketch,",
      num: 12,
    });
    let cgSketch = resCgSketch.data;

    //漫画线稿
    const resSketch = await app.$api.getArticle({
      path: "/category/cg-sketch/sketch",
      num: 12,
    });
    let sketch = resSketch.data;

    return {
      cardList,
      courseSpecial,
      sourcespack,
      cgSketch,
      sketch,
    };
  },
};
</script>
<style lang="less" scoped>
</style>
